<template>
  <div class="app-container" v-loading="loading" style="overflow-x: hidden">
    <el-form
      :model="form"
      ref="formRef"
      :inline="true"
      :rules="rules"
      label-width="130px"
      :disabled="parentType == 'view'"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryName">
            {{ form.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workshopName">
            {{ form.workshopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="productLine">
            {{ form.productLine }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionName">
            {{ form.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生产日期" prop="prodDate">
            {{ form.prodDate }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班次" prop="className">
            {{ form.className }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班组" prop="workGroupName">
            {{ form.workGroupName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="生产订单" prop="prodOrderDto" style="width: 100%">
        <el-table :data="form.prodOrderDto" border style="width: 100%; margin-top: 10px">
          <el-table-column label="订单编号" prop="orderCode" />
          <el-table-column label="产品名称" prop="prodName" />
          <el-table-column label="当班产量" prop="onDutyYield" />
          <el-table-column label="单位" prop="unit" />
        </el-table>
      </el-form-item>
    </el-form>
    <div class="previousClasses">
      <div>当前投料</div>
      <el-table :data="form.prodFeedingVo" border style="width: 100%; margin-top: 10px">
        <el-table-column label="投料内容" prop="matName" />
        <el-table-column label="物料编码" prop="matCode" />
        <el-table-column label="投料批号" prop="feedingBatchNo" />
        <el-table-column label="线边仓" prop="storehouseName" />
        <el-table-column label="库位" prop="binName" />
        <el-table-column label="投入数量" prop="inputQty" />
        <el-table-column label="单位" prop="inputUnit" />
        <el-table-column label="投料时间" prop="feedingTime" />
        <el-table-column label="操作人" prop="operator" />
        <el-table-column label="记录时间" prop="recordTime" />
      </el-table>
    </div>
    <div class="previousClasses">
      <div>报工</div>
      <el-table :data="form.reportWorkList" border class="elTable">
        <el-table-column label="产出产品" prop="bomName" />
        <el-table-column label="产出批号" prop="outputBatchNo" />
        <el-table-column label="产出数量" prop="outputQyt" />
        <el-table-column label="有效数量" prop="effectiveQyt" />
        <el-table-column label="损耗" prop="loss" />
        <el-table-column label="投产比" prop="inputProdRate" />
        <el-table-column label="缺陷描述" prop="defectDesc" />
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="收卷时间" prop="rollingTime" />
        <el-table-column label="线边仓" prop="storehouseName" />
        <el-table-column label="库位" prop="binName" />
        <el-table-column label="操作人" prop="operator" />
        <el-table-column label="记录时间" prop="recordTime" />
      </el-table>
    </div>
    <div class="previousClasses">
      <div>质检结果</div>
      <el-table :data="form.testingResultList" border class="elTable">
        <el-table-column label="质检单号" prop="qmsQualityCode" />
        <el-table-column label="质检结果" prop="testingResult">
          <template #default="scope">
            <dict-tag
              v-if="scope.row.testingResult"
              :options="quality_testing_result"
              :value="scope.row.testingResult"
            />
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="外观判定" prop="appearanceJudgment" />
        <el-table-column label="性能判定" prop="performanceJudgment" />
        <el-table-column label="不良描述" prop="defectDesc" />
        <el-table-column label="操作人" prop="createBy" />
        <el-table-column label="质检时间" prop="qualityTestingTime" />
      </el-table>
    </div>
    <div class="previousClasses">
      <div>质检详情</div>
      <DynamicTable
        v-if="form.testContent && form.testContent[0].properties.length"
        class="elTable"
        :table-data="form.testContentData"
        :table-header="form.testContent[0].properties"
      ></DynamicTable>
    </div>
  </div>
</template>

<script setup name="changeShifts">
import { ref, toRefs, reactive, useAttrs, onMounted, getCurrentInstance } from "vue";
import { getProdQualityTesting } from "@/api/productionMgt/qualityRecords";
import { getProdReportWork } from "@/api/productionMgt/productionReport";
import DynamicTable from "./components/DynamicTable.vue";
const attrs = useAttrs();
const parentType = ref("add");
const loading = ref(false);
// const previousClassInfo = ref([]);

const { proxy } = getCurrentInstance();
const { quality_testing_result } = proxy.useDict("quality_testing_result");
const emit = defineEmits(["close", "setTitle", "setActions", "setIsActionTop"]);
const actions = ref([
  {
    text: "取 消",
    theme: "",
    handle: () => {
      cancel();
    },
  },
]);

const data = reactive({
  form: {},
  rules: {},
});

const { form, rules } = toRefs(data);

function getDetail(id) {
  loading.value = true;
  getProdQualityTesting(id).then((res) => {
    form.value = res.data;
    // 质检结果
    form.value.testingResultList = form.value.status == 1 ? [] : [res.data];
    // 质检详情
    form.value.testContent = JSON.parse(res.data.testContent);
    // 组装质检详情数据值
    let _newArr = [];
    for (let i in form.value.testContent) {
      _newArr[i] = {};
      let ele = form.value.testContent[i].properties;
      for (let j in ele) {
        let _ele = ele[j];
        if (_ele.properties && _ele.properties.length > 0) {
          for (let m in _ele.properties) {
            let ar = _ele.properties[m];
            if (ar.properties && ar.properties.length > 0) {
              for (let n in ar.properties) {
                let as = ar.properties[n];
                _newArr[i][as.code] = as.value;
              }
            } else {
              _newArr[i][ar.code] = ar.value;
            }
          }
        } else {
          _newArr[i][_ele.code] = _ele.value;
        }
      }
    }
    // 质检详情数据
    form.value.testContentData = _newArr;
    // 报工
    getReportWorkDetail(form.value.prodReportWorkId);
    loading.value = false;
  });
}

function getReportWorkDetail(id) {
  getProdReportWork(id).then((res) => {
    // 报工列表
    form.value.reportWorkList = [res.data];
    // 当前投料列表
    form.value.prodFeedingVo = [res.data.prodFeedingVo];
    // 生产订单列表
    form.value.prodOrderDto = [res.data.prodOrderDto];
  });
}

function cancel() {
  emit("close");
}

onMounted(async () => {
  const { data } = attrs;
  parentType.value = data.parentType;
  if (data?.id) {
    getDetail(data.id);
  }
  actions.value = [
    {
      text: "取 消",
      theme: "",
      handle: () => {
        cancel();
      },
    },
  ];
  emit("setActions", actions.value);
});
</script>
<style lang="scss" scoped>
.previousClasses {
  margin-top: 30px;
}

.elTable {
  width: 100%;
  margin-top: 10px;
}
</style>
